<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>弹性元素样式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .box {
            display: flex;
            width: 500px;
            height: 300px;
            margin: 50px;
            border: 1px solid #f00;
            /* align-items: center; */
            /* flex-wrap: wrap; */
        }   

        .inner {
            width: 120px;
            height: 70px;
            background-color: #0f0;
            border: 1px solid #00f;
            box-sizing: border-box;
            /* 主轴有剩余空间，定义项目（弹性元素）放大比例，为0表示不放大，默认为0 */
            /* flex-grow: 1; */
            /* 主轴空间不足，定义项目（弹性元素）缩小比例，为0表示不缩小，默认为1 */
            /* flex-shrink: 0; */

            /* flex-basis 定义项目占据主轴的尺寸，权重高于宽高 */
            /* flex-basis: 30px; */

            /* flex: flex-grow flex-shrink flex-basis;
                auto 1 1 auto;  none 0 0 auto;
                8 0 10%
                1 -> flex-grow
                1 -> flex-grow 2 -> flex-shrink
                1 -> flex-grow px/% -> flex-basis
                px/% -> flex-basis
             */
            flex: 1 1px;
        }

        .inner:nth-child(3){
            order: 1;
            /* flex-grow: 2; */
            /* flex-shrink: 100; */
        }

        .inner:last-child {
            order: -1;
            /* 控制单个弹性元素交叉轴排列方式 */
            /* align-self: flex-end; */
        }

        
    </style>
</head>
<body>
    <!-- 
    项目 -- 弹性元素
    弹性元素属性
        order 控制弹性元素的排列优先级，值越小，越靠前，默认为 0
        align-self 控制自身在交叉轴的排列方式，权重高于align-items
        flex-grow  当弹性容器主轴有剩余空间时，当前元素放大比例
        flex-shrink 当弹性容器主轴空间不足时，元素的缩小比例
        flex-basis  设定弹性元素占据主轴空间的大小
        flex: flex-grow flex-shrink flex-basis; -->
    
    <div class="box">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
        <div class="inner">7</div>
    </div>
    
    <script type="text/javascript">
        
    </script>
</body>
</html>